<template>
  <div class="icon-select">
    <div class="icon-list">
      <div
        :class="['icon-item', { active: $attrs['active-icon'] === icon }]"
        v-for="(icon, index) in icons"
        :key="index"
        @click="iconClick(icon)"
      >
        <div class="icon">
          <div class="component">
            <el-icon :size="18" color="#606266">
              <component :is="icon"></component>
            </el-icon>
          </div>
          <div class="name">{{ icon }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as ElIcons from "@element-plus/icons-vue"

const emits = defineEmits(["iconSelected"])
const icons = Object.keys(ElIcons)

const iconClick = (icon: string) => {
  emits("iconSelected", icon)
  document.body.click()
}
</script>

<style scoped lang="scss">
.icon-select {
  height: 200px;
  overflow: auto;
  .icon-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .icon-item {
      width: 33.3333%;
      height: 25px;
      cursor: pointer;
      .icon {
        display: inline-flex;
        align-items: center;
        padding: 0 5px;
        line-height: 25px;
        .component {
          width: 18px;
          height: 18px;
          color: #606266;
        }
        .name {
          padding-left: 5px;
          font-size: 14px;
        }
        &:hover {
          background-color: #ececec;
          border-radius: 20px;
        }
      }
      &.active {
        .icon {
          background-color: #ececec;
          border-radius: 20px;
        }
      }
    }
  }
}
</style>
